<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="content-security-policy">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>能量逗</title>
    <link rel="stylesheet" href="../css/yxj.css">
    <script type="text/javascript" src="../js/css3d.min.js"></script>
    <script type="text/javascript" src="../js/framework7.js"></script>
    <script type="text/javascript" src="../js/orienter.min.js"></script>
    <style>
    </style>
</head>
<body>
<div class="content-wrap">
    <div id="scene"></div>
    <div class="btn-wrap">
        <div class="play-btn">
            <div class="play-btn-down"></div>
            <div class="play-btn-top">开始</div>
        </div>
    </div>
</div>
<script>
    var $$ = Dom7;
    var boxCenterz = -400;
    var boxStartRotationY = -40;
    var cameraStartz = 5000;

    //创建场景
    var s = new C3D.Stage();
    s.size(window.innerWidth, window.innerHeight).material({
        color: "#000"
    }).update();
    $$('#scene').append(s.el);

    //创建容器放入场景
    var boxRect = {w: 4700, h: 1335};
    var bgData = [
        {url: 'images/yxj2/01.jpg'},
        {url: 'images/yxj2/02.jpg'},
        {url: 'images/yxj2/03.jpg'},
        {url: 'images/yxj2/04.jpg'},
        {url: 'images/yxj2/05.jpg'},
        {url: 'images/yxj2/06.jpg'},
        {url: 'images/yxj2/07.jpg'},
        {url: 'images/yxj2/08.jpg'},
        {url: 'images/yxj2/09.jpg'},
        {url: 'images/yxj2/10.jpg'},
        {url: 'images/yxj2/11.jpg'},
        {url: 'images/yxj2/12.jpg'},
        {url: 'images/yxj2/13.jpg'},
        {url: 'images/yxj2/14.jpg'},
        {url: 'images/yxj2/15.jpg'},
        {url: 'images/yxj2/16.jpg'},
        {url: 'images/yxj2/17.jpg'},
        {url: 'images/yxj2/18.jpg'},
        {url: 'images/yxj2/19.jpg'},
        {url: 'images/yxj2/20.jpg'}
    ];


    function createBox(imgs, rect) {
        var _len = imgs.length;
        var _step = rect.w / _len;
        //var _radius = Math.floor(_step / 2 / Math.tan(Math.PI / _len)) - 1;
        var _radius = _step / 2 / Math.tan(Math.PI / _len);

        var _sp = new C3D.Sprite();
        for (var i = 0; i < _len; i++) {
            var _p = new C3D.Plane();
            var _r = 360 / _len * i;
            var _a = Math.PI * 2 / _len * i;
            _p.size(_step, rect.h).position(Math.sin(_a) * _radius, 0, -Math.cos(_a) * _radius).rotation(0, -_r, 0).material({
                image: imgs[i].url,
                repeat: 'no-repeat',
                bothsides: false
            }).update();
            _sp.addChild(_p);
        }

        return _sp;
    }

    var box = createBox(bgData, boxRect);
    box.position(0, 0, boxCenterz).rotation(0,boxStartRotationY,0).updateT();
    s.addChild(box);
    s.camera.position(0,0,cameraStartz).updateT();

    //响应屏幕调整尺寸
    function resize() {
        s.size(window.innerWidth, window.innerHeight).update();
    }

    window.onresize = function () {
        resize();
    };
    resize();


    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
        function (callback) {
            setTimeout(callback, 1000 / 60);
        };

    var o = new Orienter();
    var lon;
    var orientisOpen = false;
    var platform = o.os;
    o.onOrient = function (obj) {
        lon = obj.lon;
    };
    //场景渲染
    var animUpdateScene;
    function updateScene() {
        if (orientisOpen)
        s.camera.rotation(0, lon, 0).updateT();
        //box.rotate(0,0.1,0).updateT();
        animUpdateScene = requestAnimationFrame(updateScene);
    }
    animUpdateScene = requestAnimationFrame(updateScene);
    //开始动画
    var animPlay;
    function play(){
        if (s.camera.z>boxCenterz){
            s.camera.move(0,0,-30).updateT();
        }else {
            window.cancelAnimationFrame(animPlay);
            switch (platform){
                case 'ios':

            }
            //重力感应生效
            o.init();
            orientisOpen = true;
        }

        animPlay = requestAnimationFrame(play);
    }
    //按钮事件
    $$(document).on('touchstart','.play-btn',function () {
        $$('.play-btn-top').css({top:'-5px'});
    });
    $$(document).on('touchend','.play-btn',function () {
        $$('.play-btn-top').css({top:'-10px'});
        $$('.btn-wrap').hide();
        $$('#scene').show();
        //开始动画
        animPlay = requestAnimationFrame(play);
    });


</script>
</body>
